<template>
  <view class="w-full max-w-[750rpx] mx-auto mt-[30rpx]">
    <!-- 头部信息 -->
    <view class="flex items-center justify-between bg-gray-100 p-[20rpx]">
      <text class="text-[30rpx] font-bold">管家信息</text>
      <view class="flex">
        <nut-button type="success" size="small" class="mr-[10rpx]">AI健康方案</nut-button>
        <nut-button type="success" size="small">邀请会诊</nut-button>
      </view>
    </view>

    <!-- 用户信息 -->
    <view class="p-[20rpx]">
      <!-- 有健康管家时显示 -->
      <view v-if="hasButler" class="flex items-center mb-[24rpx] px-[20rpx]">
        <view class="flex items-center gap-2 w-full">
          <IconFont font-class-name="iconfont" class-prefix="icon" size="32" color="#59b968" name="mti-shenfenzheng" />
          <text class="text-[32rpx] font-bold">{{ currentButler.name || "未填写姓名" }}</text>
          <text class="text-[26rpx] text-gray-600 ml-auto">📱 {{ currentButler.phone || "未填写手机号" }}</text>
          <!-- <text class="text-[24rpx] text-gray-500">🏥 {{ getHospitalName(currentButler.profile) || "未填写医院" }}</text> -->
        </view>
      </view>

      <!-- 未设置健康管家时显示 -->
      <view v-else class="flex items-center justify-center py-[40rpx] bg-gray-50 rounded-[16rpx] mb-[20rpx]">
        <view class="text-center">
          <view class="w-[80rpx] h-[80rpx] rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-[16rpx]">
            <IconFont name="user" size="40" color="#999" />
          </view>
          <text class="text-[28rpx] text-gray-600 block mb-[8rpx]">未设置管家</text>
          <text class="text-[24rpx] text-gray-400 block mb-[20rpx]">请先设置您的专属健康管家</text>
          <nut-button type="primary" size="small" class="bg-emerald-500" @click="goToSetButler"> 去设置 </nut-button>
        </view>
      </view>

      <!-- 功能按钮区域 -->
      <view class="flex justify-around mt-[20rpx]">
        <view class="flex flex-col items-center" @click="handleConsult">
          <view class="w-[100rpx] h-[100rpx] rounded-full flex items-center justify-center" :class="hasButler ? 'bg-orange-300' : 'bg-gray-300'">
            <IconFont font-class-name="iconfont" class-prefix="icon" name="ren" size="36" color="#fff" />
          </view>
          <text class="mt-[10rpx] text-[28rpx]" :class="hasButler ? 'text-gray-800' : 'text-gray-400'">咨询管家</text>
        </view>
        <view class="flex flex-col items-center" @click="handleCommunication">
          <view class="w-[100rpx] h-[100rpx] rounded-full flex items-center justify-center" :class="hasButler ? 'bg-orange-300' : 'bg-gray-300'">
            <IconFont font-class-name="iconfont" class-prefix="icon" name="kehulaidianjilu" size="36" color="#fff" />
          </view>
          <text class="mt-[10rpx] text-[28rpx]" :class="hasButler ? 'text-gray-800' : 'text-gray-400'">沟通记录</text>
        </view>
        <view class="flex flex-col items-center" @click="handleDisposal">
          <view class="w-[100rpx] h-[100rpx] rounded-full flex items-center justify-center" :class="hasButler ? 'bg-orange-300' : 'bg-gray-300'">
            <IconFont font-class-name="iconfont" class-prefix="icon" name="youjian" size="36" color="#fff" />
          </view>
          <text class="mt-[10rpx] text-[28rpx]" :class="hasButler ? 'text-gray-800' : 'text-gray-400'">订单记录</text>
        </view>
        <view class="flex flex-col items-center" @click="handleHealthSummary">
          <view class="w-[100rpx] h-[100rpx] rounded-full flex items-center justify-center" :class="hasButler ? 'bg-orange-300' : 'bg-gray-300'">
            <IconFont font-class-name="iconfont" class-prefix="icon" name="bijibenjilutongxunlu" size="36" color="#fff" />
          </view>
          <text class="mt-[10rpx] text-[28rpx]" :class="hasButler ? 'text-gray-800' : 'text-gray-400'">健康计划</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { IconFont } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
import { onMounted, computed } from "vue";
import { useDemographicInfoStore } from "@/store";

// 获取 demographicStore 实例
const demographicStore = useDemographicInfoStore();

// 使用 demographicStore 中的健康管家信息
const currentButler = computed(() => demographicStore.currentHealthButler);
const hasButler = computed(() => !!currentButler.value);

onMounted(async () => {
  // 组件挂载时，健康管家信息应该已经在 demographicStore 中
  console.log("Part3组件挂载，当前健康管家信息:", currentButler.value);
});

// 解析profile字段获取医院名称
function getHospitalName(profile: string) {
  if (!profile) return "";
  const lines = profile.split("\n");
  const hospitalLine = lines.find((line) => line.includes("医院"));
  if (hospitalLine) {
    return hospitalLine.split("：")[1] || hospitalLine.split(":")[1] || "";
  }
  return "";
}

// 解析profile字段获取科室名称
function getDepartmentName(profile: string) {
  if (!profile) return "";
  const lines = profile.split("\n");
  const deptLine = lines.find((line) => line.includes("科室"));
  if (deptLine) {
    return deptLine.split("：")[1] || deptLine.split(":")[1] || "";
  }
  return "";
}

// 解析profile字段获取职位名称
function getPositionName(profile: string) {
  if (!profile) return "";
  const lines = profile.split("\n");
  const positionLine = lines.find((line) => line.includes("职位"));
  if (positionLine) {
    return positionLine.split("：")[1] || positionLine.split(":")[1] || "";
  }
  return "";
}

// 跳转到设置管家页面
function goToSetButler() {
  Taro.navigateTo({
    url: "/pages/info/personal-manager/list",
  });
}

// 处理功能按钮点击
function handleConsult() {
  if (!hasButler.value) {
    Taro.showToast({ title: "请先设置健康管家", icon: "none" });
    return;
  }
  navigateTo("consult");
}

function handleCommunication() {
  if (!hasButler.value) {
    Taro.showToast({ title: "请先设置健康管家", icon: "none" });
    return;
  }
  navigateTo("communication");
}

function handleDisposal() {
  if (!hasButler.value) {
    Taro.showToast({ title: "请先设置健康管家", icon: "none" });
    return;
  }
  navigateTo("disposal");
}

function handleHealthSummary() {
  if (!hasButler.value) {
    Taro.showToast({ title: "请先设置健康管家", icon: "none" });
    return;
  }
  navigateTo("healthSummary");
}

// 定义导航函数
const navigateTo = (page: string) => {
  // Taro.navigateTo({
  //   url: `/pages/health/${page}`,
  // })
};
</script>

<style>
/* 如果需要额外的样式可以在这里添加 */
</style>
